<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head>
<body>
<section class="todoapp">
	<header class="header">
		<h1>todos</h1>
		<!--输入框与数据双向绑定-->
		<!--注册回车事件-->
		<input class="new-todo" placeholder="What needs to be done?" v-model="todoName" @keyup.enter="addTodo" autofocus>
	</header>
	<!-- This section should be hidden by default and shown when there are todos -->
	<section class="main">
		<!-- 1. checkbox 选中后，将列表所有checkbox选中 ，取消选中后，将列表所有checkbox取消选中-->
		<!-- 2. 列表所有checkbox都选中后 ，toggle-all自动选中-->
		<input id="toggle-all" class="toggle-all" type="checkbox"  v-model="isCheckedAll">
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<!-- 显示任务列表 -->
			<!--如果任务正在被编辑，应该给li添加一个editing的类-->
			<li v-for="item in showList" :key="item.id" :class="{completed:item.flag,editing:item.id===now}">
				<div class="view">
					<input  @change="changeState(item.id, item.flag)" class="toggle" type="checkbox" v-model="item.flag">
					<!-- add: 添加双击监听,双击后显示编辑输入框-->
					<label @dblclick="showEdit(item.id)">{{ item.name }}</label>
					<button class="destroy"  @click="delTodo(item.id)"></button>
				</div>
				<!--添加回车监听，回车后，输入框隐藏-->
				<input class="edit" @keyup.enter="updateTodo(item.id, item.name)" v-model="item.name">
			</li>
		</ul>
	</section>
	<!-- This footer should be hidden by default and shown when there are todos -->
	<footer class="footer" v-show="isShowFooter">
		<!-- This should be `0 items left` by default -->
		<span class="todo-count"><strong>{{ unCompletedCount }}</strong> item left</span>
		<!-- Remove this if you don't implement routing -->

		<!--给每个a标签添加一个点击事件，通过不同的参数控制样式-->
		<ul class="filters">
			<li>
				<a @click.prevent="change('ALL')" :class="{selected:filterType==='ALL'}" href="#/">All</a>
			</li>
			<li>
				<a @click.prevent="change('Active')"  :class="{selected:filterType==='Active'}" href="#/active">Active</a>
			</li>
			<li>
				<a @click.prevent="change('Completed')"  :class="{selected:filterType==='Completed'}" href="#/completed">Completed</a>
			</li>
		</ul>
		<!-- Hidden if no completed items are left ↓ -->
		<!--控制隐藏，监听点击事件-->
		<button class="clear-completed" v-show="isShowClear" @click="clearTodo">Clear completed</button>
	</footer>
</section>

<!-- Scripts here. Don't remove ↓ -->
<script src="node_modules/vue/dist/vue.global.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="js/app.js"></script>
</body>
</html>
